import { useEffect, useState } from "react";
import { Card, Descriptions, Button, Space } from "antd";
import { useParams } from "react-router-dom";
import { reqGetHospitalDetail } from "@/api/hospital/hospitalList";
import type {
  HospitalItem,
  BookingRule,
} from "@/api/hospital/hospitalList/types";

export default function HospitalDetail() {
  // Partial<HospitalItem> 泛型工具类型：将对象所有属性变成可选属性
  const [hospital, setHospital] = useState<Partial<HospitalItem>>({});
  const [bookingRule, setBookingRule] = useState<Partial<BookingRule>>({});

  const params = useParams();

  useEffect(() => {
    const id = params.id as string;
    const getHospitalDetail = async () => {
      const res = await reqGetHospitalDetail(id);
      setHospital(res.hospital);
      setBookingRule(res.bookingRule);
    };
    getHospitalDetail();
  }, []);

  const formatHospital = () => {
    // 默认一行分为3列。默认每个元素占1列
    // span: 1.5, 元素占1.5列
    // span: 3, 元素独占一行
    return [
      {
        key: "hosname",
        label: "医院名称",
        children: hospital.hosname,
        span: 1.5,
      },
      {
        key: "logoData",
        label: "医院LOGO",
        children: (
          <img
            style={{ width: 100, height: 100 }}
            src={"data:image/jpeg;base64," + hospital.logoData}
          />
        ),
        span: 1.5,
      },
      {
        key: "hoscode",
        label: "医院编号",
        children: hospital.hoscode,
        span: 1.5,
      },
      {
        key: "fullAddress",
        label: "医院地址",
        // children: hospital.param ? hospital.param.fullAddress : undefined,
        // ?. --> 可选链: 判断问号前面的内容是否有值，有值执行后面内容，没有值直接返回
        children: hospital.param?.fullAddress,
        span: 1.5,
      },
      {
        key: "route",
        label: "坐车路线",
        children: hospital.route,
        span: 3,
      },
      {
        key: "intro",
        label: "医院简介",
        children: hospital.intro,
        span: 3,
      },
    ];
  };

  const formatBookingRule = () => {
    // 默认一行分为3列。默认每个元素占1列
    // span: 1.5, 元素占1.5列
    // span: 3, 元素独占一行
    return [
      {
        key: "cycle",
        label: "预约周期",
        children: bookingRule.cycle + "天",
        span: 1.5,
      },
      {
        key: "releaseTime",
        label: "放号时间",
        children: bookingRule.releaseTime,
        span: 1.5,
      },
      {
        key: "stopTime",
        label: "停挂时间",
        children: bookingRule.stopTime,
        span: 1.5,
      },
      {
        key: "quitTime",
        label: "退号时间",
        children: bookingRule.quitTime,
        span: 1.5,
      },
      {
        key: "rule",
        label: "预约规则",
        children: (
          <>
            {bookingRule.rule?.map((item, index) => {
              return (
                <div key={index}>
                  {index + 1}. {item}
                </div>
              );
            })}
          </>
        ),
        span: 3,
      },
    ];
  };

  return (
    <Card>
      <Space direction="vertical" size="middle">
        <Descriptions title="基本信息" bordered items={formatHospital()} />
        <Descriptions
          title="预约规则信息"
          bordered
          items={formatBookingRule()}
        />
        <Button>返回</Button>
      </Space>
    </Card>
  );
}
